<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    ul li {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid #fff;
      opacity: 0.4;
      position: relative;
    }
    .box {
      position: relative;
    }
    .dot {
      position: absolute;
      bottom: 20px;
      left: 20px;
    }
    .box .dot li a {
      display: block;
    }
    .box .dot li .active {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #fff;
      position: absolute;
      top: 1px;
      left: 1px;
    }
  </style>
  <body>
    <div class="box">
      <img
        src="https://images.shobserver.com/news/690_390/2021/7/5/17e5c0c7fecd415794c3d30a11ffbb3b.jpg"
        alt=""
        srcset=""
      />
      <ul class="dot">
        <li>
          <a href="" class="active"></a>
        </li>
        <li>
          <a href=""></a>
        </li>
        <li>
          <a href=""></a>
        </li>
        <li>
          <a href=""></a>
        </li>
        <li>
          <a href=""></a>
        </li>
        <li>
          <a href=""></a>
        </li>
        <li>
          <a href=""></a>
        </li>
        <li>
          <a href=""></a>
        </li>
      </ul>
    </div>
  </body>
</html>
